<template>
	<view class="head">
		<view class="back" @click="goBack">
			<image src="@/static/public/arrow_left_000000.png" mode="heightFix"></image>
		</view>
		<view class="title">个人信息</view>
		<view class="placeholder"></view>
	</view>
	<view class="regionalization">
		<view class="line" @click="updateAvater">
			<view class="tap">头像</view>
			<view class="content">
				<image :src="fileUrl + user.avatar" mode="heightFix"></image>
			</view>
			<image class="arrow-right" src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
		<view class="line" @click="goDetails('name')">
			<view class="tap">昵称</view>
			<view class="content">
				<view class="text">{{user.name}}</view>
			</view>
			<image class="arrow-right" src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
		<view class="line">
			<view class="tap" @click="goDetails('intro')">签名</view>
			<view class="content" @click="goDetails('intro')">
				<view class="text">{{user.intro}}</view>
			</view>
			<image class="arrow-right" src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
		<view class="line" @click="sex.show = true">
			<view class="tap">性别</view>
			<view class="content">
				<view class="text">
					<span v-for="(item,index) in sex.list"><span
							v-if="item.dictValue == user.sex">{{item.name}}</span></span>
				</view>
			</view>
			<image class="arrow-right" src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
		<view class="line last" @click="time.show =  true">
			<view class="tap">生日</view>
			<view class="content">
				<view class="text">{{birthday}}</view>
			</view>
			<image class="arrow-right" src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
	</view>
	<up-loading-page bg-color="#e8e8e8" :loading="loading"></up-loading-page>
	<up-action-sheet :actions="sex.list" :show="sex.show" cancelText="取消" @select="selectSex"
		@close="sex.show = false"></up-action-sheet>
	<up-datetime-picker v-if="time.show" hasInput :show="time.show" v-model="time.date" :minDate="time.minDate"
		:maxDate="time.maxDate" @cancel="time.show = false" @confirm="timeClick" mode="date"
		style="position: fixed; bottom: 0;"
		></up-datetime-picker>
</template>

<script setup>
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	import api from '@/utlis/api.js';
	import { fileUrl, userInfo, uploadFile } from '@/utlis/config.js';
	import { DICT_TYPE, dict } from '@/utlis/dict.js';






	const timeClick = (item) => {
		time.value.show = false;
		const date = new Date(item.value);
		// 获取各个部分
		const year = date.getFullYear();
		const month = date.getMonth() + 1; // 月份是从 0 开始的，所以要加 1
		const day = date.getDate();

		birthday.value = `${year}年${month}月${day}日`;
		user.value.birthday = `${year}-${month}-${day} 00:00:00`;
		uni.$store.commit("setUser", user.value);
		loading.value = true;
		userBase({
			'birthday': user.value.birthday
		});
	}

	const birthday = ref('');

	const time = ref({
		show: false,
		minDate: 0,
		maxDate: 0,
		date: 0
	})

	const user = ref("");
	const sex = ref({
		show: false,
		list: []
	});
	const loading = ref(false);

	//修改性别
	const selectSex = (item) => {
		if (user.value.sex != item.dictValue) {
			user.value.sex = item.dictValue;
			uni.$store.commit("setUser", user.value)
			loading.value = true;
			userBase({
				'sex': item.dictValue
			});
		}
	}

	//修改文字
	const goDetails = (argument) => {
		uni.navigateTo({
			url: '/pages/account/detail?argument=' + argument
		});
	}

	//修改头像
	const updateAvater = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ["compressed"],
			crop: {
				width: 200,
				height: 200
			},
			success: (pic) => {
				loading.value = true;
				uploadFile(pic.tempFilePaths[0]).then(picUrl => {
					user.value.avatar = picUrl.ossId;
					uni.$store.commit("setUser", user.value)
					userBase({
						'avatar': picUrl.ossId
					});
				}).catch(err => {
					loading.value = false;
				});
			}
		})
	}


	const userBase = (data) => {
		api("app/user/userBase/", "PUT", data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000,
				});
			}
			loading.value = false;
		}).catch(err => {
			loading.value = false;
		});
	}

	onShow(() => {
		let data = JSON.parse(JSON.stringify(uni.$store.state.user));
		if (user.value != "" && (user.value.name != data.name || user.value.intro != data
				.intro || user
				.value.account != data
				.account)) {
			uni.showToast({
				title: "修改成功",
				icon: 'none',
				duration: 1000,
			});
		}
		user.value = data;
		const cache = data.birthday.split(' ')[0].split('-');
		birthday.value = cache[0] + "年" + cache[1] + "年" + cache[2] + "日"
	});


	onLoad(() => {
		dict(DICT_TYPE.SYS_USER_SEX).then(data => {
			sex.value.list = data;
			for (var i = 0; i < sex.value.list.length; i++) {
				sex.value.list[i].name = sex.value.list[i].dictLabel
			}
		});
		time.value.maxDate = new Date().getTime();
		time.value.minDate = time.value.maxDate - (120 * 365 * 24 * 60 * 60 * 1000);
		time.value.date = time.value.maxDate;
	});


	// const time = ref({
	// 	show: false,
	// 	minDate: 0,
	// 	maxDate: 0,
	// 	date: 0
	// })


	//返回
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>
<style lang="scss">
	.head {
		display: flex;
		flex-wrap: wrap;
		padding: 85rpx 30rpx 20rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-wrap: wrap;

		.back,
		.placeholder {
			width: 100rpx;

			image {
				height: 35rpx;
			}
		}

		.title {
			width: 490rpx;
			text-align: center;
		}
	}

	.regionalization {
		margin: 40rpx 30rpx 0 30rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;

		.line {
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #BCBCBC;
			align-items: center;
			margin: 0 30rpx;
			padding: 15rpx 0;
			box-sizing: border-box;

			.tap {
				line-height: 80rpx;
				width: 100rpx;
			}

			.content {
				width: 500rpx;
				text-align: right;
				padding-right: 20rpx;
				box-sizing: border-box;

				.text {
					font-size: 30rpx;
					color: #9A9A9A;
				}

				image {
					height: 100rpx;
					border-radius: 20rpx;
				}
			}

			.arrow-right {
				height: 20rpx;
			}
		}

		.last {
			border: 0 solid rgba(0, 0, 0, 0);
			box-sizing: border-box;
		}

	}
</style>